<template>
  <div class="mask" v-show="showCart&&totalCount>0">
  </div>
  <div class="cart-list" v-show="showCart&&totalCount>0">
    <div class="header">
      <div class="check"><span :class="{'iconfont':true, 'select-all':true,'select-all-checked':!allChecked}"
                               class="iconfont select-all">&#xe624;</span><span class="title"
                                                                                @click="changeAllProductState(shopId)">全选</span>
      </div>
      <div class="clear-cartList" @click="clearCartProducts">清空购物车</div>
    </div>
    <div class="content">
      <div v-for="product in cartList?.[shopId]?.products||[]" :key="product.info.id" class="product">
        <div :class="{'iconfont':true, 'cart-icon':true,'cart-icon-checked':!product.checked}"
             @click="changeSelectedState(shopId,product.info.id)">&#xe624;
        </div>
        <img class="product-image" :src="product.info.imgUrl" alt="">
        <div class="intro">
          <p class="name">{{ product.info.name }}</p>
          <p class="price">
                <span class="discount-price">
                  <em class="price-unit">￥</em>
                  <em class="price-number">{{ product.info.discountPrice }}</em>
                </span>
            <span class="selling-price">
                  ¥{{ product.info.sellingPrice }}
                </span>
          </p>
          <div class="product-count">
            <span class="minus" @click="changeCount(shopId,product.info.id,product.info,-1)">-</span>
            <span data-test="count"></span>
            {{ product.count || 0 }}
            <span
              class="plus"
              @click="changeCount(shopId,product.info.id,product.info,1)">+</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="cart">
    <div class="left" @click="changeCart">
      <span class="iconfont">&#xe63f;</span>
      <span class="total-count">{{ totalCount }}</span>
    </div>
    <div class="center">
      总计: <em class="price">￥{{ totalAmount }}</em>
    </div>
    <div class="right" @click="redirectToOrderConform">去结算</div>
  </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router'
import { useCartList } from '@/views/Shop/useCartList'
import { ref } from 'vue'

export default {
  name: 'Cart',
  props: ['cartList'],
  setup (props) {
    const route = useRoute()
    const shopId = route.params.id
    const {
      totalAmount,
      totalCount,
      allChecked,
      changeCount,
      clearCart,
      changeSelectedState,
      changeAllProductState
    } = useCartList(shopId, props.cartList)
    const showCart = ref(false)
    const changeCart = () => {
      showCart.value = !showCart.value
    }
    const clearCartProducts = () => {
      showCart.value = !showCart.value
      clearCart(shopId)
    }
    const router = useRouter()
    const redirectToOrderConform = () => {
      router.push({ path: `/order-confirmation/${shopId}` })
    }
    return {
      shopId,
      totalCount,
      totalAmount,
      showCart,
      allChecked,
      changeCount,
      changeCart,
      clearCartProducts,
      changeSelectedState,
      changeAllProductState,
      redirectToOrderConform
    }
  }
}
</script>

<style lang="scss" scoped>
.mask {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.50);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.cart-list {
  position: fixed;
  bottom: .49rem;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 999;

  .header {
    display: flex;
    flex-direction: row;
    height: .52rem;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.01rem solid #F1F1F1;
    padding-left: .18rem;

    font-size: 0.16rem;
    color: #333333;
    text-align: right;
    line-height: 0.16rem;

    .select-all {
      font-size: .2rem;
      color: #0091FF;
      text-align: center;
      line-height: .48rem;
      margin-right: .09rem;

      &-checked {
        color: #333333;
      }
    }

    .clear-cartList {
      margin-right: .28rem;
    }
  }

  .content {
    padding-top: .12rem;

    .product {
      position: relative;
      display: flex;
      padding-bottom: .12rem;
      box-sizing: border-box;

      .cart-icon {
        width: .54rem;
        color: #0091FF;
        text-align: center;
        font-size: .2rem;
        line-height: .48rem;

        &-checked {
          color: #333333;
        }
      }

      .product-image {
        height: .46rem;
        width: .46rem;
        margin-right: .16rem;
      }

      .intro {

        .name {
          font-size: .14rem;
          color: #333333;
          margin: 0 0 .06rem 0;
        }

        .month-sales {
          font-size: .12rem;
          color: #333333;
          line-height: .16rem;
          margin: .06rem 0;
        }

        .price {
          .discount-price {
            color: #E93B3B;
            margin-right: .12rem;

            .price-unit {
              font-size: .1rem;
            }

            .price-number {
              line-height: .20rem;
              font-size: .14rem;
            }
          }

          .selling-price {
            font-size: .10rem;
            color: #999999;
            line-height: .20rem;
            text-decoration: line-through;
          }
        }
      }

      .product-count {
        position: absolute;
        right: .3rem;
        bottom: 0.3rem;
        font-size: .14rem;
        color: #333333;
        line-height: .16rem;

        .minus {
          width: .16rem;
          height: .16rem;
          border: .01rem solid black;
          border-radius: 50%;
          display: inline-block;
          line-height: .16rem;
          font-size: .15rem;
          text-align: center;
        }

        .plus {
          width: .18rem;
          height: .18rem;
          border: none;
          border-radius: 50%;
          background-color: #0091FF;
          color: #FFFFFF;
          display: inline-block;
          line-height: .16rem;
          font-size: .16rem;
          text-align: center;
        }
      }
    }
  }
}

.cart {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: .49rem;
  background-color: #FFFFFF;
  box-shadow: 0 -.01rem .01rem 0 #F1F1F1;
  display: flex;
  align-items: center;
  z-index: 9999;

  .left {
    width: .76rem;
    height: .49rem;
    text-align: center;
    position: relative;

    .iconfont {
      display: inline-block;
      color: #4FB0F9;
      font-size: .28rem;
      line-height: .48rem;
    }

    .total-count {
      display: inline-block;
      position: absolute;
      top: .04rem;
      right: .13rem;
      height: .20rem;
      width: .20rem;
      background-color: red;
      border-radius: 50%;
      text-align: center;
      font-size: .12rem;
      line-height: .2rem;
      color: white;
      transform: scale(.5);
    }

  }

  .center {
    flex: 1;
    font-size: .12rem;
    color: #333333;

    .price {
      font-size: 0.18rem;
      color: #E93B3B;
    }
  }

  .right {
    width: .98rem;
    height: 100%;
    text-align: center;
    background-color: #4FB0F9;
    color: #FFFFFF;
    font-size: .14rem;
    line-height: .49rem;
  }
}

</style>
